<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :xs="0" :sm="2" :md="4" :lg="6"
        ><div class="grid-content bg-purple"></div
      ></el-col>
      <el-col :xs="24" :sm="20" :md="16" :lg="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>工时审核APP</span>
            <el-button
              style="float: right; padding: 3px 0; margin-left: 15px"
              type="text"
              @click="handlePass()"
              >审核</el-button
            >
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="handleRollback()"
              >回退</el-button
            >
          </div>

          <el-table
            v-loading="loading"
            :data="checkList"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="30"> </el-table-column>
            <el-table-column type="expand" width="30">
              <template slot-scope="props">
                <el-form
                  label-width="80px"
                  label-position="left"
                  class="demo-table-expand"
                >
                  <el-form-item label="项目阶段" style="">
                    <span>{{ props.row.stageName }}</span>
                  </el-form-item>
                  <el-form-item label="事务种类">
                    <span>{{ props.row.officeName }}</span>
                  </el-form-item>
                  <el-form-item label="备注">
                    <span>{{ props.row.workRemark }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="申报人员" align="center" prop="nickName" />
            <el-table-column
              label="项目编码"
              align="center"
              prop="projectCode"
            />
            <el-table-column label="申报工时" align="center" prop="workHour" />
            <el-table-column
              label="申报时间"
              align="center"
              prop="workTime"
              width="90"
            >
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.workTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-card>
      </el-col>
      <el-col :xs="0" :sm="2" :md="4" :lg="6"
        ><div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>

    <!-- 回退 -->
    <el-dialog
      :title="rollbackTitle"
      :visible.sync="isRollback"
      width="80%"
      append-to-body
    >
      <el-form
        ref="rollbackForm"
        :model="rollbackForm"
        :rules="rules"
        label-width="100px"
        label-position="top"
      >
        <el-form-item label="回退原因" prop="rollback">
          <el-input type="textarea" :rows="3" v-model="rollbackForm.rollback" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="rollbackSubmitForm">确 定</el-button>
        <el-button @click="rollbackCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listCheck, batchPass, rollback } from '@/api/work/check'
import { setToken, getToken, removeToken } from '@/utils/auth'

export default {
  name: 'WorkAppCheck',
  data() {
    return {
      // 多选框
      multipleSelection: '',
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        nickName: undefined
      },
      // 审核列表
      checkList: [],
      // 弹出层标题
      rollbackTitle: '',
      // 是否显示弹出层
      isRollback: false,
      // 回退表单参数
      rollbackForm: {},
      // 表单校验
      rules: {
        rollback: [
          { required: true, message: '回退原因不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    /** 清除token */
    removeToken()
    this.init()
  },
  methods: {
    /** 查询审核列表 */
    init() {
      let token = undefined
      /** 判断路由，防止获取不到路由参数，路由重定向到 index */
      if (this.$route && this.$route.query) {
        /** 获取token */
        token = this.$route.query.token
      }
      if (this.parseStrEmpty(token)) {
        setToken(token)
        this.$store.commit('SET_TOKEN', token)
      }

      this.getList()
    },
    /** 查询审核列表 */
    getList() {
      this.loading = true
      listCheck(this.queryParams).then((response) => {
        this.checkList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 多选框 */
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /** 审核通过（批量） */
    handlePass() {
      if (this.multipleSelection && this.multipleSelection.length > 0) {
        const batchData = JSON.stringify({ fills: this.multipleSelection })
        batchPass(batchData).then((response) => {
          this.$modal.msgSuccess('审核成功')
          this.getList()
        })
      } else {
        this.$message.error('请勾选审核数据。。。')
      }
    },
    /** 回退弹框 */
    handleRollback() {
      if (this.multipleSelection && this.multipleSelection.length === 1) {
        this.rollbackForm = {}
        this.resetForm('rollbackForm')
        let row = this.multipleSelection[0]
        let copy = Object.assign({}, row) //row是所编辑本行内数据对象
        this.rollbackForm = copy
        this.isRollback = true
        this.rollbackTitle = '回退' + this.rollbackForm.nickName + '申报'
      } else if (this.multipleSelection.length > 1) {
        this.$message.error('不能多个回退！！！')
      } else {
        this.$message.error('请勾选审核数据。。。')
      }
    },
    /** 回退确定 */
    rollbackSubmitForm() {
      if (this.rollbackForm) {
        this.$refs['rollbackForm'].validate((valid) => {
          if (valid) {
            this.rollbackForm.params = undefined
            rollback(this.rollbackForm).then((response) => {
              this.$modal.msgSuccess('回退成功')
              this.isRollback = false
              this.getList()
            })
          }
        })
      } else {
        this.$message.error('数据异常')
      }
    },
    /** 回退取消 */
    rollbackCancel() {
      this.isRollback = false
      this.rollbackForm = {}
    }
  }
}
</script>

<style>
.demo-table-expand {
  margin-left: 15px;
}
.demo-table-expand label {
  color: #99a9bf;
  font-size: 10px;
  margin-left: 15px;
}
.demo-table-expand div {
  margin-bottom: 0 !important;
}
.el-form-item__content {
  font-size: 6px;
  margin-bottom: 0;
}
.el-form-item--small .el-form-item__label {
  line-height: 22px;
}
.el-form-item--small .el-form-item__content {
  line-height: 22px;
}
.bg-purple {
  background: white;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
